<template>
	<view class="page-container">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="支付成功" isBackShow></free-nav-bar>
		<!-- #endif -->
		<view class="page-content">
			<view class="page-top">
				<view class="payment-status-icon flex-center">
					<image src="@/static/images/pay-success.svg"></image>
				</view>
				<view class="payment-status flex-center">
					<text>支付成功</text>
				</view>
				<view class="payment-money flex-center">实付￥{{getYuan(order.payPrice)}}</view>
				<view class="btns flex-center">
					<view class="btn" @tap="toHomePage()">返回首页</view>
					<view class="btn" @tap="viewOrderDetails()">查看订单</view>
				</view>
			</view>
		<!-- 	<view class="recommend">
				<view class="recommend-title">你可能还喜欢</view>
				<view class="product-list">
					<view class="list-item">
						<view class="product-image">
							<image src="@/static/images/mail.png" mode=""></image>
						</view>
						<view class="product-name">精品台农芒果新鲜上市 中果</view>
						<view class="product-prices"><text class="symbol">￥</text>95.0</view>
					</view>
					<view class="list-item">
						<view class="product-image">
							<image src="@/static/images/mail.png" mode=""></image>
						</view>
						<view class="product-name">精品台农芒果新鲜上市 中果</view>
						<view class="product-prices"><text class="symbol">￥</text>95.0</view>
					</view>
					<view class="list-item">
						<view class="product-image">
							<image src="@/static/images/mail.png" mode=""></image>
						</view>
						<view class="product-name">精品台农芒果新鲜上市 中果</view>
						<view class="product-prices"><text class="symbol">￥</text>95.0</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import $U from '@/common/free-lib/util.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import $H from '@/common/free-lib/request.js';
	export default {
		name: 'paymentSuccess',
		components: {
			freeNavBar
		},
		data () {
			return {
				orderId: null,
				order: {},
				payPrice: 0
			}
		},
		onLoad (option) {
			if(option && option.orderId) {
				this.orderId = option.orderId;
				this.getOrderDetail();
			}
			
		},
		onReachBottom() {
			console.log("加载推荐商品。")
		},
		methods: {
			getYuan(price) {
				return $U.fenToYuan(price);
			},
			getOrderDetail() {
				let _this = this;
				$H.get('/trade/order/get-detail',{id: _this.orderId}).then(res => {
					if(res) {
						_this.order = res;
					}
				})
			},
			toHomePage () {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				})
			},
			viewOrderDetails () {
				uni.navigateTo({url: '/pages/mail/order-detail?id=' + this.orderId});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100%;
		height: 100vh;
		background-color: #F2F2F2;
	}
	.page-content {
		padding-bottom: env(safe-area-inset-bottom);
		.page-top {
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			border-radius: 0 0 50rpx 50rpx;
			.flex-center {
				display: flex;
				justify-content: center;
			}
			.payment-status-icon {
				width: 100%;
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			.payment-status {
				width: 100%;
				line-height: 50rpx;
				text {
					font-size: 39rpx;
					font-weight: bold;
				}
			}
			.payment-money {
				width: 100%;
				padding-top: 20rpx;
				font-size: 30rpx;
				color: #7C7C7C;
			}
			.btns {
				width: 100%;
				padding-top: 20rpx;
				.btn {
					font-size: 30rpx;
					color: #A7A7A7;
					border: 1px solid #A7A7A7;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
					margin: 0 15rpx;
				}
			}
		}
		.recommend {
			width: 100%;
			margin-top: 50rpx;
			
			.recommend-title {
				font-size: 26rpx;
				font-weight: bold;
				padding-left: 30rpx;
			}
			.product-list {
				width: calc(100% - 30rpx);
				margin: 15rpx 15rpx 0 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-self: space-between;
				.symbol {
					font-style: normal;
					font-size: 24rpx;
					font-weight: normal;
				}
				.list-item {
					width: 330rpx;
					margin: 15rpx;
					padding-bottom: 30rpx;
					background-color: #fff;
					border-radius: 10rpx;
				}
				.product-image {
					width: 270rpx;
					height: 270rpx;
					margin: 30rpx;
				}
				.product-image image {
					width: 100%;
					height: 100%;
				}
				.product-name {
					padding: 0 30rpx;
					font-size: 26rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.product-prices {
					padding: 10rpx 30rpx 0 30rpx;
					color: red;
					font-size: 30rpx;
				}
			}
		}
	}
</style>